<!DOCTYPE HTML>
<html>
    <head>
    <title>JavaScript Datepicker</title>
    <script src="calendar.js" type="text/javascript"></script>
    <style>
body {
	font:1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	padding:0 0 50px 0;
	margin:50px auto;
}
a {
	text-decoration:none
}
#main {
	width:770px;
	padding:0;
	margin:0 auto;
}
h1 {
	font:3em Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	text-shadow: #ccc 1px 3px 1px;
}
h2 {
	font:1.65em "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-style:italic;
	text-shadow: #ccc 1px 1px 2px;
	border-bottom:2px dotted #AAA;
}
#demo1, #demo2 {
	margin:25px;
}
#demo1 .calendar {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.35em;
	text-align: center;
	text-shadow: #fff 0 0 1px;
	color: #444;
	empty-cells: hide;
	-webkit-user-select: none;
}
#demo1 .calendar tr.daynames td {
	color: #888;
	border-bottom:1px dotted #CCC;
}
#demo1 .calendar td {
	cursor: default;
	width:70px;
	line-height:65px;
}
#demo1 .calendar td:empty {
	visibility:hidden;
}
#demo1 .calendar .today {
	color: #000;
	font-weight: bold;
}
#demo1 .calendar .btn {
	cursor: pointer;
	color: #000;
}
#demo1 .calendar td.title {
	letter-spacing:1px;
	color: #000;
}
#demo2 .calendar {
	border-radius:3px;
	border: 2px solid #999;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	color: #444;
	width:160px;
	background-color: #fff;
	empty-cells: hide;
	-webkit-user-select: none;
	-moz-user-select: none;
	-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, .35);
	-moz-box-shadow: 0px 5px 20px rgba(0, 0, 0, .35);
}
#demo2 .calendar tr.daynames {
	font-weight:bold;
	color: #666;
	background-color:#E3E3E3;
	cursor: pointer;
	text-shadow:#FFF 1px 1px 0.5px;
}
#demo2 .calendar td {
	cursor: default;
	padding:2px 3px;
}
#demo2 .calendar td:empty {
	visibility:hidden;
}
#demo2 .calendar .today {
	padding:3px;
	color: #000;
	font-weight: bold;
}
#demo2 .calendar .btn {
	cursor: pointer;
	color: #000;
	font-weight: bold;
}
#demo2 .calendar td.title {
	color: #000;
}
</style>
    </head>
    <body>
    <div id="main">
      <h1 align="center">1Kb JavaScript Calendar</h1>
      <h2>Usage:</h2>
      <p>Simple! call <code>calendar('divID', Month, Year)</code> and add css code as in examples.</p>
      <p>You can also change the language, the first day of the week and the text of the buttons, see the uncompressed version.</p>
      <h2>Download:</h2>
      <p>Click <a href="1Kb JavaScript Calendar.zip">here</a> to download the latest version of 1Kb JavaScript Calendar (js, min.js and examples).</p>
      <h2>Examples:</h2>
      <div align="center" id="demo1"></div>
      <div align="center" id="demo2"></div>
      <h2>Author & License:</h2>
      <p>1Kb JavaScript Calendar is under GNU General Public License.</p>
      <p>&copy;2010 David Gonzalez Garcia. Please visit <a href="davidxl.blogspot.com">davidxl.blogspot.com</a>.</p>
      <script type="text/javascript">
		var hoy = new Date();
		var Month = hoy.getMonth()+1;
		var Year = hoy.getFullYear();
		calendar("demo1",Month, Year);
		calendar("demo2",Month, Year);
	  </script> 
    </div>
</body>
</html>